import React, { useState } from 'react'
import { Mask, Space } from '@/components/UiComponents';
import { CheckboxGroup, Checkbox, Button, View } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
export default (props) => {
  const { visible = {}, onClose, submit } = props
  const { show = false, detail = {} } = visible
  const { orderSn, packageGoodsType, packageGoodsInfo = '[]', chooseAmount, id } = detail
  const listDesc = JSON.parse(packageGoodsInfo) || []
  const [value, setValue] = useState([])
  return (
    <Mask
      show={show}
      closeBtn={false}
      onClose={() => onClose()}
    >
      <View className='selectMask_box'>
        <View className="SelectedCard_box">
          <Space direction='vertical'>
            <View className="SelectedCard_title">
              <View className="SelectedCard_title_left">订单：{orderSn}</View>
            </View>
            <View style={{ textAlign: 'center' }}>
              请在以下商品中选择 {chooseAmount}件打包商品
            </View>
          </Space>
          <CheckboxGroup onChange={(e) => {
            const list = e.target.value
            setValue(list.reduce((item, value) => {
              let newList = item
              listDesc.forEach(val => {
                if (value == val.goodsId) {
                  newList = [...newList, val]
                }
              })
              return newList
            }, []))
          }}>
            <Space direction='vertical'>
              {listDesc.map((val, index) => {
                const { goodsName, cover = '', chooseFlag, goodsId } = val
                return <Checkbox key={index} value={goodsId}>
                  <View className="selectCard_list" key={index}>
                    <View style={backgroundObj(cover.split(','))} className="selectCard_list_profile"></View>
                    <View className="selectCard_list_goodsName">{goodsName}</View>
                  </View>
                </Checkbox>
              })}
            </Space>
          </CheckboxGroup>
          <Button className="SelectedCard_getBtn" onClick={() => submit(value, chooseAmount, id)} color='primary'>领取</Button>
        </View>
      </View>
    </Mask>
  )
}

